<template>
  <el-card class="mb-4">
    <el-row>
      <el-col :span="12" class="flex flex-col items-center mb-4">
        <div class="text-lg font-bold">
          {{ statusMap[props.data.status] || "无" }}
        </div>
        <div class="text-gray-500">状态</div>
      </el-col>
      <el-col :span="12" class="flex flex-col items-center">
        <div class="text-lg font-bold">{{ wheelStatusMap || "无" }}</div>
        <div class="text-gray-500">运动</div>
      </el-col>
      <el-col :span="12" class="flex flex-col items-center">
        <div class="text-lg font-bold">
          {{ navStatusMap[props.data.navStatus] || "无" }}
        </div>
        <div class="text-gray-500">导航</div>
      </el-col>
      <el-col :span="12" class="flex flex-col items-center">
        <div class="text-lg font-bold">
          {{ chargeStatusMap[props.data.chargeStatus] || "无" }}
        </div>
        <div class="text-gray-500">无线充电</div>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="mb-4">
    <div class="flex">
      <div class="text-gray-500">电量</div>
      <el-progress
        class="flex-1 ml-3"
        :percentage="props.data.battery || 0"
        :stroke-width="20"
        :text-inside="true"
      />
    </div>
  </el-card>
  <el-card class="mb-4">
    <robot-position :bg-img="props.data.mapUrl" :pos="pos" />
  </el-card>
  <el-card class="mb-4">
    <el-row>
      <el-col :span="24" class="flex flex-col items-center mb-2">
        <div class="text-lg font-bold">{{ props.data.coordinateX || 0 }}</div>
        <div class="text-gray-500">x坐标</div>
      </el-col>
      <el-col :span="24" class="flex flex-col items-center mb-2">
        <div class="text-lg font-bold">{{ props.data.coordinateY || 0 }}</div>
        <div class="text-gray-500">y坐标</div>
      </el-col>
      <el-col :span="24" class="flex flex-col items-center">
        <div class="text-lg font-bold">{{ props.data.theta || 0 }}</div>
        <div class="text-gray-500">θ坐标</div>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="mb-4">
    <el-row>
      <el-col :span="24" class="flex flex-col items-center mb-2">
        <div class="text-lg font-bold">{{ props.data.speedX || 0 }}m/s</div>
        <div class="text-gray-500">x速度</div>
      </el-col>
      <el-col :span="24" class="flex flex-col items-center mb-2">
        <div class="text-lg font-bold">{{ props.data.speedY || 0 }}m/s</div>
        <div class="text-gray-500">y速度</div>
      </el-col>
      <el-col :span="24" class="flex flex-col items-center">
        <div class="text-lg font-bold">{{ props.data.speedZ || 0 }}m/s</div>
        <div class="text-gray-500">z速度</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from "vue";
import RobotPosition from "./RobotPosition";

// 机器人状态数据类型
interface Data {
  battery?: number;
  coordinateX?: number;
  coordinateY?: number;
  theta?: number;
  speedX?: number;
  speedY?: number;
  speedZ?: number;
  status?: number;
  wheelStatus?: number;
  navStatus?: number;
  chargeStatus?: number;
  mapUrl?: string;
}

// 机器人状态映射值
const statusMap = {
  0: "正常",
  1: "异常",
};

// 运动状态
const wheelStatusMap = computed(() => {
  return props.data.wheelStatus === 1 ? "正常" : "故障";
});

// 导航状态映射值
const navStatusMap = {
  0: "故障",
  1: "故障",
  2: "待机",
  3: "工作中",
  4: "遥控",
  5: "对准中",
  12: "任务",
};

// 无线充电状态映射值
const chargeStatusMap = {
  "-1": "故障",
  0: "未充电",
  1: "充电中",
};

const props = defineProps<{ data?: Data }>();

// 机器人位置数据
const pos = computed(() => ({
  x: props.data.coordinateX,
  y: props.data.coordinateY,
  theta: props.data.theta,
}));
</script>
